
<template>
  <div class="execution">
    <el-dialog
      :title="'设置回复期限'"
      :visible="!!mode"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      width="80%"
    >
      <temp-data
        v-if="mode === 'setReplayLimit'"
        :query="{ids:selection}"
        :fetch="setReplayLimitPreLoad"
        @close="mode = null"
        @save="handleSaveReplayLimit"
        :tableOption="settingTableOption"
      />
    </el-dialog>
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
        @selection-change="selectionChange"
      >
        <template
          slot-scope="{row}"
          slot="isLimitedReply"
        >
          {{!!row.sendStatus ? (row.isLimitedReply == 1 ? '是' : '否') : '-'}}
        </template>
        <!-- <template
          slot="searchMenu"
          slot-scope="{row,size}"
        >
          <el-button
            v-if="permissionList.export"
            @click="exportClick(row)"
          >导出</el-button>
        </template> -->
        <!-- <template slot-scope="{type,size}" slot="menu">
          <el-button :size="size" :type="type">预览</el-button>
        </template> -->
        <template slot="menuRight">
          <el-button
            v-if="permissionList.export"
            @click="exportClick"
          >导出</el-button>
          <el-button
            v-if="permissionList.setReplayLimit"
            type="primary"
            size="small"
            :disabled="this.selection.length === 0"
            @click="mode = 'setReplayLimit'"
          >设置回复期限</el-button>
          <el-button
            v-if="permissionList.send"
            type="primary"
            size="small"
            @click="handleSend"
            :disabled="this.selection.length === 0"
          >报送协查</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { fetchList, setReplayLimit, setReplayLimitPre, send, dataExport } from '@/api/rca/swckclearingaccountrepportface'
import { tableOption, settingTableOption, startDate , endDate } from '@/const/crud/rca/swckclearingaccountrepportface'
import { handleExcelResponse, getQueryString } from "@/util/util";
import { mapGetters } from 'vuex'
import TempData from '../components/TempData'

export default {
  name: 'swckclearingaccountrepportface',
  components: {
    TempData
  },
  data () {
    return {
      searchForm: {
        tradeDate: [startDate, endDate]
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      settingTableOption: settingTableOption,

      extraParam: {

      },
      selection: [],
      mode: null,
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList () {
      return {
        setReplayLimit: this.vaildData(this.permissions.sw_ck_clearing_account_repport_face_setReplayLimit, false),
        send: this.vaildData(this.permissions.sw_ck_clearing_account_repport_face_send, false),
        export: this.vaildData(this.permissions.sw_ck_clearing_account_repport_face_export, false)
      };
    }
  },
  methods: {
    getList (page, params) {
      this.tableLoading = true
      const [startDate , endDate] = this.searchForm.tradeDate || [];
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, {startDate,endDate}, this.searchForm)).then(response => {
        this.tableData = response.data.data
        this.page.total = response.data.data.length
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    async exportClick (row) {
      // await this.searchChange(row, () => { });
      this.dataExport();
    },
    async dataExport () {
      if (this.selection.length === 0) {
        this.$message.error('请选择要导出的数据');
        return;
      }
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      })
      try {
        const res = await dataExport({ ids: this.selection });
        // handleExcelResponse(res, `${startDate}至${endDate}导出.xlsx`);
        handleExcelResponse(res);
      } finally {
        loading.close();
      }
    },
    async searchChange (form, done) {
      this.searchForm = { ...form, ...this.extraParam };
      try {
        await this.getList(this.page, this.searchForm);
      } finally {
        done();
      }
    },
    refreshChange () {
      this.getList(this.page)
    },
    selectionChange (list) {
      this.selection = list.map(l => l.id);
    },
    handleSend: function () {
      send(this.selection).then(data => {
        this.$message.success('发送成功')
        this.getList(this.page)
      })
    },
    async handleSaveReplayLimit (val) {
      await setReplayLimit(val)
      this.$message.success('设置成功')
      this.getList(this.page)
    },
    async setReplayLimitPreLoad (val) {
      const res = await setReplayLimitPre(val.ids)
      return res
    },
    searchReset () {

      this.page.currentPage = 1
      this.getList(this.page);
    },
  }
}
</script>
